<template>
  <div :class="{ home: true, openMenus: !isCollapse, closeMenus: isCollapse }">
    <div class="menus">
      <div class="text-center font-bold text-white pt-20 pb-10 flex items-center justify-center">
        <img src="@/assets/logo.jpg" height="30px"/>{{ $sysTitle }}后台
      </div>
      <el-menu :collapse="isCollapse" default-active="home" background-color="#304156" text-color="#fff"
        active-text-color="#409eff" router>
        <el-menu-item index="/admin">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="/admin/dashboard">
          <i class="el-icon-s-data"></i>
          <span slot="title">数据仪表盘</span>
        </el-menu-item>
        <el-menu-item index="/admin/admin">
          <i class="el-icon-user"></i>
          <span slot="title">管理员管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/member">
          <i class="el-icon-user-solid"></i>
          <span slot="title">用户管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/category">
          <i class="el-icon-s-promotion"></i>
          <span slot="title">房型管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/room">
          <i class="el-icon-s-cooperation"></i>
          <span slot="title">房间管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/appointment">
          <i class="el-icon-s-flag"></i>
          <span slot="title">预约管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/orders">
          <i class="el-icon-s-order"></i>
          <span slot="title">入住管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/message">
          <i class="el-icon-warning"></i>
          <span slot="title">留言管理</span>
        </el-menu-item>
        <el-menu-item index="/admin/notice">
          <i class="el-icon-bell"></i>
          <span slot="title">公告管理</span>
        </el-menu-item>

        <!-- <el-submenu index>
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/account">
          <i class="el-icon-setting"></i>
          <span slot="title">查询用户</span>
        </el-menu-item>
        </el-submenu> -->
      </el-menu>
    </div>
    <div class="content">
      <div class="navbar">
        <div class="navbar-btn" @click="isCollapse = !isCollapse">
          <i class="el-icon-s-fold" v-if="!isCollapse"></i>
          <i class="el-icon-s-unfold" v-else></i>
        </div>
        <div class="navbar-right">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              {{ user.name }}<i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-s-custom" @click.native="$router.push('/admin/adminInfo')">个人信息</el-dropdown-item>
              <el-dropdown-item icon="el-icon-caret-left" @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!-- 内容部分 -->
      <div class="section">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
import { removeToken } from '@/utils/auth'
export default {
  name: "Home",
  computed: {
    ...mapState(['user'])  // 映射 Vuex 中的 user 状态到当前组件的计算属性
  },
  data() {
    return {
      isCollapse: false,  // 控制菜单栏是否折叠的状态
    };
  },
  methods: {
    ...mapMutations(['setUser', 'setToken']),
    logout() {
      this.$confirm('确认退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeToken()  // 移除用户 token
        this.setUser({})  // 清空用户信息
        this.setToken('')  // 清空 token
        this.$router.replace('/front')  // 跳转到前台页面
      }).catch(() => { });
    }
  },
};
</script>

<style lang="less" scoped>
:deep(*) {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.home {
  min-height: 100vh;
  width: 100vw;
  background: linear-gradient(135deg, #232946 0%, #393e46 100%);
  position: relative;
  overflow-x: hidden;
}

.openMenus {
  .menus {
    height: 100vh;
    width: 220px;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;
    background: #232946;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18);
    z-index: 1000;

    .el-menu {
      border-right: none;
      background: transparent !important;
    }

    /deep/ .el-menu-item {
      height: 50px;
      line-height: 50px;
      margin: 4px 8px;
      border-radius: 8px;
      transition: color 0.2s, background 0.2s;
      color: #fff !important;
      font-size: 15px;
      font-weight: 500;
      
      &:hover {
        background: #2d3a4b !important;
        color: #ffd700 !important;
      }
      
      &.is-active {
        background: #232946 !important;
        color: #ffd700 !important;
        font-weight: bold;
      }
    }
  }

  .content {
    margin-left: 220px;
    width: calc(100% - 220px);
    min-height: 100vh;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #232946 0%, #393e46 100%);
    position: relative;
  }
}

.closeMenus {
  .menus {
    height: 100vh;
    width: 64px;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #232946;
    box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18);
    z-index: 1000;

    .el-menu {
      border-right: none;
      background: transparent !important;
    }

    /deep/ .el-menu-item {
      height: 50px;
      line-height: 50px;
      margin: 4px 8px;
      border-radius: 8px;
      transition: color 0.2s, background 0.2s;
      color: #fff !important;
      font-size: 15px;
      font-weight: 500;
      
      &:hover {
        background: #2d3a4b !important;
        color: #ffd700 !important;
      }
      
      &.is-active {
        background: #232946 !important;
        color: #ffd700 !important;
        font-weight: bold;
      }
    }
  }

  .content {
    margin-left: 64px;
    width: calc(100% - 64px);
    min-height: 100vh;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #232946 0%, #393e46 100%);
    position: relative;
  }
}

.navbar {
  height: 64px;
  background: #232946;
  display: flex;
  align-items: center;
  padding: 0 24px;
  justify-content: space-between;
  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.18);
  position: fixed;
  top: 0;
  right: 0;
  left: 220px;
  z-index: 999;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  .navbar-btn {
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    transition: color 0.2s, background 0.2s;
    padding: 0 16px;
    border-radius: 8px;
    
    &:hover {
      color: #ffd700;
      background: #2d3a4b;
    }
  }

  .navbar-right {
    min-width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;

    .el-dropdown-link {
      color: #fff;
      font-size: 15px;
      font-weight: 500;
      transition: color 0.2s, background 0.2s;
      padding: 0 16px;
      border-radius: 8px;
      height: 40px;
      line-height: 40px;
      
      &:hover {
        color: #ffd700;
        background: #2d3a4b;
      }
    }
  }
}

.content {
  padding-top: 64px;
  min-height: 100vh;
  background: linear-gradient(135deg, #232946 0%, #393e46 100%);
  
  .section {
    padding: 20px;
    background: rgba(35,41,70,0.92);
    min-height: calc(100vh - 64px);
    border-radius: 18px;
    margin: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  }
}

// Logo和标题样式
.text-center {
  img {
    border-radius: 8px;
    margin-right: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
  color: #fff !important;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 16px 0;
}

// 修复关闭菜单时导航栏的位置
.closeMenus .navbar {
  left: 64px;
}
</style>
